<template>
  <scroll-view class="scroll_content" scroll-y="true">
    <view class="content">
      <view class="follow_list" v-if="gzList.length > 0">
        <view class="follow_item" v-for="(item, index) in gzList" :key="index">
          <view class="follow_head">
            <view class="item_img">
              <image
                class="img100"
                :src="item.avatar"
                mode="aspectFill"
                @click="toHome(item)"
              ></image>
            </view>
            <view class="info">
              <text class="item_name">{{ item.nickname }}</text>
              <view class="item_label ">
                <text>{{ item.major_title }}</text>
              </view>
            </view>
            <text
              class="item_btn no"
              @click="gzFun(item, index)"
              >已关注</text
            >
          </view>
        </view>
      </view>
      <!-- 没有关注 -->
      <view v-if="gzList.length == 0">
        <view class="empty_content">
          <image
            class="img100"
            src="@/static/img/my/homeCenter/empty.png"
            mode=""
          ></image>
        </view>
        <view class="empty_txt">
          <text class="txt_top">还没有关注任何人呢</text>
          <text class="txt_bottom"
            >关注你感兴趣的人，他们发布的内容会在这里展示</text
          >
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../pages/my/homeCenter/followList"
></script>

<style lang="less" scoped>
/*关注*/
.scroll_content {
  position: relative;
  height: calc(100vh - 100rpx);
  overflow: hidden;

  .content {
    position: relative;
    z-index: 20;
    min-height: 100%;
    background-color: #fff;
    overflow: hidden;
  }

  .empty_content {
    margin: 100rpx auto 0;
    width: 192rpx;
    height: 192rpx;

  }
  .empty_txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    .txt_top {
      font-size: 30rpx;
      margin-top: 30rpx;
    }
    .txt_bottom {
      font-size: 22rpx;
      color: #999;
      margin-top: 15rpx;
    }
  }

  .follow_list {
    padding: 0 40rpx;
    margin-top: 20rpx;

    .follow_item {
      padding: 18rpx 0;

      .follow_head {
        display: flex;
        align-items: center;
        .item_img {
          margin-right: 20rpx;
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          overflow: hidden;
        }

        .info{
          flex: 1;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          .item_name {
            font-size: 30rpx;
          }
        }

        .item_label {
          margin-top: 2rpx;
          font-size: 26rpx;
          color: #afafaf;
        }

        .item_btn {
          width: 120rpx;
          height: 55rpx;
          background: #1c87f3;
          border-radius: 77rpx;
          font-size: 24rpx;
          color: #ffffff;
          display: flex;
          justify-content: center;
          align-items: center;

          &.no {
            background: #f4f4f4;
            color: #999;
          }
        }
      }
    }
  }
}
</style>
